{extend name="public/base"/}
{block name="body"}
<title>楼幢列表</title>
<style type="text/css">
	.pagelist ul li{display:inline-block;width:20px;height:20px;text-align:center;}
	.pagelist ul li a{width:20px;height:20px;}
	.pagelist ul li.active{background-color:#ccc !important;color:#fff;}
	/*修改pic的宽高,可调整图片大小*/
    .mark{position:fixed;top:0;width:100%;height:100%; background:#000;opacity: 0.8;}

	.pics{position:fixed;top:20%;left:40%;width:20%;}
	sub{position:fixed;top:20%;left:60%;width:20px;height:20px;background: #fff;text-align:center;line-height:20px;cursor:pointer;color:red;}
	.pic{position:fixed;top:20%;left:25%;width:50%;}
	sup{position:fixed;top:20%;left:75%;width:20px;height:20px;background: #fff;text-align:center;line-height:20px;cursor:pointer;color:red;}
</style>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 楼幢管理 <span class="c-gray en">&gt;</span> 楼幢列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container" id="box">
	<form class="text-c"> 日期范围：
		
		<input name="fromtime" type="text" {literal} onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}' })" {/literal} id="datemin" class="input-text Wdate" style="width:120px;" value="{$fromtime}">
		-
		<input name="totime" type="text" {literal} onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d' })" {/literal} id="datemax" class="input-text Wdate" style="width:120px;" value="{$totime}">
		
		<input type="text" class="input-text" style="width:280px" placeholder="输入GUID/行政区域/街道巷/门牌/小区/楼幢" id="keyword" name="keyword" value="{$keyword}">
		<button type="submit" class="btn btn-success" id="" name=""><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
	</form>
	<div class="cl pd-5 bg-1 bk-gray mt-20">
		<span class="l">
			<a href="javascript:;" onclick="admin_add('添加楼幢','{:url('block_add')}','800','500')" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加楼幢</a>
			<a title="批量生成二维码" href="javascript:;" onclick="admin_qrcodes(this)" class="btn btn-success radius" style="text-decoration:none">批量生成二维码</a>
			<a title="批量生成牌" href="javascript:;" onclick="admin_mp(this)" class="btn btn-success radius" style="text-decoration:none">批量生成牌</a>
		</span>
	</div>
	<table class="table table-border table-bordered table-bg">
		<thead>
			<tr>
				<th scope="col" colspan="13">楼幢列表<span class="r">共有数据：<strong>{$count}</strong> 条</span></th>
			</tr>
			<tr class="text-c">
				<th width="40">ID</th>
				<th width="120">GUID</th>
				<th width="100">行政区域</th>
				<th width="100">街道巷</th>
				<th width="100">门牌</th>
				<th width="100">小区</th>
				<th width="100">楼幢</th>
				<th width="80">二维码</th>
				<th width="80">号牌</th>
				<th width="130">加入时间</th>
				<th width="100">操作</th>
			</tr>
		</thead>
		<tbody>
			{foreach $list as $key=>$value }
			<tr class="text-c" id="val_{$value.id}">
				<td>{$value.id}</td>
				<td>{$value.guid}</td>
				<td>{$value.city}</td>
				<td>{$value.street}</td>
				<td>{$value.plate}</td>
				<td>{$value.estate}</td>
				<td>{$value.block}</td>
				<td><dt><img style="width:30px;height:30px;" src="{$value.qrcode}"></dt></td>
				<td><dd><img style="width:50px;height:30px;" src="{$value.img}"></dd></td>
				<td>{:date('Y-m-d H:i:s',$value.time)}</td>
				<td class="td-manage">
					<a title="编辑" href="javascript:;" onclick="admin_edit('楼幢编辑','{:url('block_edit')}?id={$value.id}',{$value.id},'800','500')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a>
					<a title="删除" href="javascript:;" onclick="admin_del(this,{$value.id})" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a>
				</td>
			</tr>
      		{/foreach}
		    <tr>
		        <td colspan="13">
			        <div class="pagelist"  style="text-align: right;">
			        	{$list->render()|raw}
			        </div>
		        </td>
		    </tr>
		</tbody>
	</table>
</div>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/static/lib/My97DatePicker/4.8/WdatePicker.js"></script> 
<script type="text/javascript" src="/static/lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="/static/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">
/*分类-增加*/
function admin_add(title,url,w,h){
	layer_show(title,url,w,h);
}
/*分类-删除*/
function admin_del(obj,id){
	layer.confirm('确认要删除吗？',function(index){
		$.ajax({
			type: 'POST',
			url: 'block_del',
			data:{id:id},
			success: function(data){
				$(obj).parents("tr").remove();
				layer.msg('已删除!',{icon:1,time:3000});
			},
			error:function(data) {
				console.log(data.msg);
			},
		});		
	});
}
function admin_qrcodes(obj){
	layer.confirm('确认批量生成二维码？',function(index){
		$.ajax({
			type: 'POST',
			url: 'qrcodes',
			data:{},
			success: function(data){
				if(data.code==200){
					layer.msg('生成成功!',{icon:1,time:3000});
					setTimeout("location.reload()",1000);
				}
			},
			error:function(data) {
				console.log(data.msg);
			},
		});		
	});
}
function admin_mp(obj){
	layer.confirm('确认批量生成牌？',function(index){
		$.ajax({
			type: 'POST',
			url: 'plates',
			data:{},
			success: function(data){
				if(data.code==200){
					layer.msg('生成成功!',{icon:1,time:3000});
					setTimeout("location.reload()",2000);
				}
			},
			error:function(data) {
				console.log(data.msg);
			},
		});		
	});
}
/*分类-编辑*/
function admin_edit(title,url,id,w,h){
	layer_show(title,url,w,h);
}

$(".pagelist").on("click",".pagination a",function(){
  var url=$(this).attr("href");
  var fromtime=$("#datemin").val();
  var totime=$("input[name=totime]").val();
  var keyword=$("#keyword").val();
  url=url+'&fromtime='+fromtime+'&totime='+totime+'&keyword='+keyword;
  getPage(url);
  return false;
});
function getPage(url)
{
  $.get(url, function(data){
    $("body").html(data);

  });
}
// 点击放大图片
var liss=document.getElementsByTagName('dt');
var boxs=document.getElementById('box');
	//遍历所有的li,单击的是哪个li里的图片src 。
	//	创建div  className='mark' 追加到box
	//	创建img  src          className  追加到box
	//	创建span  innerHTML=X  追加到box
for(var i=0;i<liss.length;i++){
	     liss[i].onclick=function(){
	     	var  newDivs=document.createElement('div');
	     		 newDivs.className='mark';
	     		 boxs.appendChild(newDivs);
	     	var  newImgs=document.createElement('img');
	     		 newImgs.className='pics';
	     		 newImgs.src=this.getElementsByTagName('img')[0].src;
	     		// newImg.src=this.childNodes[0].src;
	     		 boxs.appendChild(newImgs);
	     	var newSub=document.createElement("sub");
	     		newSub.innerHTML='X';
	     		boxs.appendChild(newSub);

	     		newSub.onclick=function(){
	     			boxs.removeChild(newDivs);
	     			boxs.removeChild(newSub);
	     			boxs.removeChild(newImgs);
	     		}

	     }

}
var lis=document.getElementsByTagName('dd');
var box=document.getElementById('box');
	//遍历所有的li,单击的是哪个li里的图片src 。
	//	创建div  className='mark' 追加到box
	//	创建img  src          className  追加到box
	//	创建span  innerHTML=X  追加到box
for(var i=0;i<lis.length;i++){
	     lis[i].onclick=function(){
	     	var  newDiv=document.createElement('div');
	     		 newDiv.className='mark';
	     		 box.appendChild(newDiv);
	     	var  newImg=document.createElement('img');
	     		 newImg.className='pic';
	     		 newImg.src=this.getElementsByTagName('img')[0].src;
	     		// newImg.src=this.childNodes[0].src;
	     		 box.appendChild(newImg);
	     	var newSup=document.createElement("sup");
	     		newSup.innerHTML='X';
	     		box.appendChild(newSup);

	     		newSup.onclick=function(){
	     			box.removeChild(newDiv);
	     			box.removeChild(newSup);
	     			box.removeChild(newImg);
	     		}

	     }

}
</script>
{/block}